<script>
// @ts-check
// 默认启用vscode提供的ts强类型检查

// 默认导入一揽子vue2.7内常用的组合式api。 prettier忽略本行。
// prettier-ignore
import { defineComponent, ref, computed, watch, nextTick, onMounted } from "vue";

// 默认导入来自lodash-es提供的常用工具。 prettier忽略本行。
// prettier-ignore
import { isArray, isUndefined, isString, isNumber, isNil, isEqual, toString, merge, cloneDeep } from "lodash-es";

import { MessageBox } from "element-ui";

import store from "@/store/index.js";
import i18n from "lang/index.js";
import db from "utils/localstorage/main.js";
import request from "utils/request.js";
import router from "@/router/index.js";

import LangSelect from "@/components/LangSelect/index.vue";
import Screenfull from "@/components/Screenfull/index.vue";
import Search from "@/components/HeaderSearch/index.vue";

/**
 * TopNavRightBox 顶部导航栏右边内容组件
 * @author 技术运维中心 阮中楠
 * @description
 * 这是一个容器组件 仅仅是为了包裹一些通用的功能
 *
 * 比如 用户头像 用户名 退出登录 等等
 */
export default defineComponent({
  name: "TopNavRightBox",
  props: {},
  emits: [],

  components: {
    LangSelect,
    Screenfull,
    Search,
  },

  setup(props, { attrs, slots, emit, expose }) {
    const avatar = computed(() =>
      require(`@/assets/avatar/${store.state.account.user.avatar}`)
    );

    const username = computed(() => store.state.account.user.username);

    function setting() {
      store.commit("setting/openSettingBar", true);
    }

    function deleteCache() {
      MessageBox.confirm(
        toString(i18n.t("tips.confirmDeleteCache")),
        toString(i18n.t("common.tips")),
        {
          confirmButtonText: toString(i18n.t("common.confirm")),
          cancelButtonText: toString(i18n.t("common.cancel")),
          type: "warning",
        }
      )
        .then(() => {
          db.remove("USER_ROUTER");
          db.remove("PERMISSIONS");
          location.reload();
        })
        .catch(() => {
          // do nothing
        });
    }

    function clean() {
      db.clear();
      router.push("login");
    }

    function logout() {
      request
        .delete("auth/signout")
        .then(() => {
          clean();
        })
        .catch(() => {
          clean();
        });
    }

    return {
      avatar,
      username,

      setting,
      deleteCache,
      logout,
    };
  },

  data() {
    return {};
  },

  computed: {},

  methods: {},

  watch: {},

  created() {},

  mounted() {},
});
</script>

<template>
  <section class="TopNavRightBox-root">
    <div class="right-menu">
      <!-- <Search id="header-search" class="right-menu-item" /> -->

      <!-- <Screenfull id="screenfull" class="right-menu-item hover-effect" /> -->

      <!-- <LangSelect class="right-menu-item hover-effect" /> -->

      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" alt="avatar" />
          <!-- <span class="user-name">{{ username }}</span> -->
          <svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
        </div>

        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>
              {{ $t("navbar.profile") }}
            </el-dropdown-item>
          </router-link>

          <el-dropdown-item>
            <span style="display: block" @click="setting()">
              {{ $t("navbar.setting") }}
            </span>
          </el-dropdown-item>

          <el-dropdown-item divided>
            <span style="display: block" @click="deleteCache()">
              {{ $t("navbar.deleteCache") }}
            </span>
          </el-dropdown-item>

          <el-dropdown-item divided>
            <span style="display: block" @click="logout">
              {{ $t("navbar.logOut") }}
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.TopNavRightBox-root {
  height: 100%;

  // 宽度是内部撑开的
  // width: fit-content;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  // 待优化 这里的间距实现方式 需要重构
  .right-menu {
    height: 100%;
    line-height: 100%;

    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 16px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      // display: inline-block;
      // padding: 0 8px;
      // vertical-align: text-bottom;

      height: 100%;
      font-size: 18px;
      color: white;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        .user-name {
          vertical-align: top;
          font-size: 20rem;
          margin-left: 5px;
          margin-top: -4px;
          display: inline-block;
        }

        .user-avatar {
          cursor: pointer;
          width: 23.66rem;
          height: 23.66rem;
          border-radius: 50%;
          vertical-align: text-bottom;
          margin-right: 16rem;
        }

        svg{
          width: 14rem;
          height: 14rem;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
